<template>
	<div class="container">
		<!-- 面包屑导航栏 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item >帮买取快递废品回收</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 模糊搜索框 -->
		<el-row>
			<!-- form表单行内表单 -->
			<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
				<el-form-item label="门店名称:">
					<el-input v-model="queryInfo.shopName" placeholder="请输入门店名称"></el-input>
				</el-form-item>
				<el-form-item label="门店手机号:">
					<el-input v-model="queryInfo.shopPhone" placeholder="请输入门店手机号"></el-input>
				</el-form-item>
				<el-form-item label="提交日期:">
					<div class="block">
						<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getShop">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-button type="primary" @click="add">新增门店</el-button>

		<!-- Form 添加信息的嵌套的表单-->
		<!-- title；对话框的名称 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" width="50%">
			<el-form :model="shopData">
				<el-form-item label="门店名称" label-width="100px">
					<el-input placeholder="请输入门店名称" v-model="shopData.shopName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="门店手机号" label-width="100px">
					<el-input placeholder="请输入门店手机号" v-model="shopData.shopPhone" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="所属地区" label-width="100px">
					<el-cascader v-model="address" :options="citys"></el-cascader>
					<!-- <el-cascader placeholder="请选择省市区" v-model="address" :options="citys"></el-cascader> -->
				</el-form-item>

				<el-form-item label="" label-width="100px">
					<el-input placeholder="请输入门店详细地址" v-model="shopData.shopAddress" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="门店坐标" label-width="100px">
					<el-button @click="getGeo">获取位置</el-button>
					<span>{{shopData.shopLongitude}},{{shopData.shopLatitude}}</span>
				</el-form-item>
				<el-form-item label="营业时间" label-width="100px">
					<el-input placeholder="请输入营业时间" v-model="shopData.shopDescribe" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirmForm">确 定</el-button>
			</div>
		</el-dialog>



		<!-- 表格内容 -->
		<el-table :data="list" border style="width: 100%;margin-top: 20px;"
			:header-cell-style="{backgroundColor:'#eee'}" show-overflow-tooltip>
			<el-table-column prop="shopName" label="门店" align="center">
			</el-table-column>
			<el-table-column prop="shopId" label="id" width="180" align="center">
			</el-table-column>
			<el-table-column prop="shopPhone" label="门店手机号" width="180" align="center">
			</el-table-column>
			<el-table-column prop="shopAddress" label="门店地址" align="center">
			</el-table-column>
			<el-table-column prop="shopDescribe" label="营业时间" align="center">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope='scope'>
					<el-button type="text" @click="handleEdit(scope.row)">修改门店资料</el-button>
					<el-button type="text" @click="handleDelete(scope.row.shopId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-row>
			<div class="block">
				<el-pagination :current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 40]"
					:page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange">

				</el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				queryInfo: {
					shopName: '',
					shopPhone: '',
					pageNum: 1, // 当前页码
					pageSize: 10, // 每页显示条数  
					// 分别保存开始时间和结束时间
					startTime: '',
					endTime: '',
				},
				total: 0, // 总数据条数 
				// 使用数组来保存日期范围，仅用于内部状态同步
				date: '',
				list: [],
				//	添加栏目信息
				dialogFormVisible: false,
				shopData: { // 门店信息
					//  	shopAddress: "", // 详细地址
					//  	shopCity: "", // 所属城市
					//  	shopDistrict: "", // 所属区域 
					//  	shopLatitude: "", // 纬度
					//  	shopLongitude: "", // 经度
					//  	shopName: "", // 名称
					// shopPhone:'',
					//  	shopProvince: "", // 所属省份/直辖市
					// shopDescribe:''	,//	营业时间
					// shopImage:''
					shopAddress: "",
					shopCity: "",
					shopDescribe: "",
					shopDistrict: "",
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopPhone: "",
					shopProvince: ""
				},
				title: '门店新增',
				citys: citys,
				address: [],
				URL:''
			}
		},
		methods: {
			// 处理每页条数变化
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				this.getShop(this.queryInfo.pageNum, val);
			},
			// 处理当前页码变化  
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.getShop(val, this.queryInfo.pageSize);
			},
			// handleDateRangeChange(value) {
			//   // 当日期范围改变时，更新startTime和endTime  
			//   if (value && value.length === 2) {  
			// 	this.startTime = value[0];  
			// 	this.endTime = value[1];  
			//   } else {  
			// 	// 如果需要，可以处理其他情况，比如空值或只有一个日期的情况  
			// 	this.startTime = '';  
			// 	this.endTime = '';  
			//   }  
			// },  
			
			//	获取坐标经纬度
			getGeo() {
				let address = this.shopData.shopProvince + this.shopData.shopCity + this.shopData.shopDistrict
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							// 一定要注意密钥是否正确
							key: '457886b5972a97e93fb9cdccebfd450f',
							'address': address
						}
					})
					.then((res) => {
						// console.log(res.data.geocodes[0].location);
						let loc = res.data.geocodes[0].location
						this.shopData.shopLongitude = loc.split(',')[0]
						this.shopData.shopLatitude = loc.split(',')[1]
					})
			},
			//	添加页面
			add() {
				this.dialogFormVisible = true
				this.URL = 'http://10.10.18.156:8089/panghudaojiaBackend/shop?action=update&doIt=addShop'
			},
			//	修改
			handleEdit(row){
				this.title = '编辑门店'
				this.shopData = row
				this.dialogFormVisible = true
				this.address = [this.shopData.shopProvince, this.shopData.shopCity, this.shopData.shopDistrict]
				// /shop/modifyShop  接口
				this.URL = 'http://10.10.18.156:8089/panghudaojiaBackend/shop?action=update&doIt=modifyShop'
			},
			//	确定添加/修改方法
			confirmForm() {
				// alert("进来了")
				//	这里使用post请求
				this.$http({
					methods:"post",
					url:this.URL,
					params:{
						shopId:this.shopData.shopId,
						shopName:this.shopData.shopName,
						shopPhone:this.shopData.shopPhone,
						shopLatitude:this.shopData.shopLatitude,
						shopLongitude:this.shopData.shopLongitude,
						shopAddress:this.shopData.shopAddress,
						shopDescribe:this.shopData.shopDescribe,
						shopProvince:this.shopData.shopProvince,
						shopCity:this.shopData.shopCity,
						shopDistrict:this.shopData.shopDistrict,
					}
					})
					.then((res) => {
						// 判断返回状态码
						if (res.data.status == 200) {
							this.$message.success('操作成功')
							this.dialogFormVisible = false
							this.getShop()
							this.cancel()
						} else {
							alert('出错了！！！')
						}
					})
			},
			handleDelete(shopId){

				this.$confirm('真的要删除这条信息吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					console.log('没有这个接口');
					this.$http({
						methods:"post",
						url:'http://10.10.18.156:8089/panghudaojiaBackend/shop?action=delete',
						params:{
							'shopId':shopId
						}
					})
					.then((res)=>{
						if(res.data.status == 200){
							this.$message.success('删除成功')
							this.getShop()
						}else{
							this.$message.error('删除失败')
						}
					})
					// this.$http.post('/community/communityRemove', {
					// 		'communityId': communityId
					// 	})
					// 	.then((res) => {
					// 		if (res.data.status == 200) {
					// 			this.$message.success('删除成功')
					// 			this.getComm()
					// 		} else {
					// 			this.$message.error('删除失败')
					// 		}
					// 	})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//	取消方法
			cancel() {
				this.dialogFormVisible = false
				this.shopData = {
					shopAddress: "",
					shopCity: "",
					shopDescribe: "",
					shopDistrict: "",
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopPhone: "",
					shopProvince: ""
				}
				this.address= []
			},

			//	获取表格数据
			getShop(pageNum = 1, pageSize = 10) {
				this.$http.get('http://10.10.18.156:8089/panghudaojiaBackend/shop?action=selectAll', {
						params: this.queryInfo
					})
					.then((res) => {
						console.log(res);
						this.total = res.data.data.total
						this.list = res.data.data.list
						// console.log(res.data.data.list);
					})
			}
		},
		mounted() {
			this.getShop()
		},
		watch: {
			//	要求名称必须和变量名保持一致
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			//	侦听选择的地区变化 得到省市区信息
			address() {
				this.shopData.shopProvince = this.address[0]
				this.shopData.shopCity = this.address[1]
				this.shopData.shopDistrict = this.address[2]
			}
		},
	}
</script>

<style>
</style>